import React, { useRef } from 'react';
import { Carousel, Icon, Tag } from 'antd';
import cn from 'classnames';

import styles from './style.less';

const VersionDetail = ({ data, detail, setProductDetail }) => {
    const ref = useRef();
    const { perspTaskProductVersionVOList = [] } = data;
    const renderBoxCls = id => {
        if (id === detail.id) return cn(styles.box, styles.boxSelected);
        return styles.box;
    };
    // const renderStatusCls = text => {
    //     const map = {
    //         逾期: styles.colorRed,
    //         正常: styles.colorGreen
    //     };

    //     return map[text] || null;
    // };
    // useEffect(() => {
    //     const container =
    // }, []);
    return (
        <div className={styles.wrap}>
            <Icon
                className={styles.upButton}
                type="up-circle"
                onClick={() => {
                    ref.current.prev();
                }}
            />
            <Carousel vertical slidesToScroll={1} slidesToShow={2} ref={ref} className={styles.carousel}>
                {perspTaskProductVersionVOList.map(item => (
                    <div className={renderBoxCls(item.id)} key={item.id} onClick={() => setProductDetail({ ...item })}>
                        <div className={styles.title}>
                            版本: {item.versionName}
                            <Tag style={{ marginLeft: 8 }}>{item.releaseFlagName}</Tag>
                        </div>
                        <ul className={styles.detail}>
                            <li>项目组: {item.projectGroup}</li>
                            <li>任务数: {item.totalTaskNum}</li>
                            <li>计划工作量: {item.planWorkloadNum}小时</li>
                            <li>额定工作量: {item.shouldDoneWorkloadNum}小时</li>
                            <li>人均bug量: {item.perCapitaBugNum}</li>
                        </ul>
                        <div className={cn(styles.status)}>{item.statusName}</div>
                        <div className={styles.score}>
                            <em>
                                {item.evalScore}
                                <span>分</span>
                            </em>
                            任务质量
                        </div>
                    </div>
                ))}
            </Carousel>
            <Icon
                className={styles.downButton}
                type="up-circle"
                onClick={() => {
                    ref.current.next();
                }}
            />
        </div>
    );
};

export default VersionDetail;
